<!DOCTYPE html>
<html lang="cmn">
<head>
	<meta charset="UTF-8">
	<title>轮播图4</title>
	<style type="text/css">
		body,ul,ol{
			margin: 0;
			padding: 0;
		}
		li{
			list-style-type: none;
		}
		#box{
			width: 600px;
			height: 450px;
			position: relative;
			left: 400px;
			top: 20px;
			overflow: hidden;
		}
		img{
			border: none;
			vertical-align: top;
		}
		ul{
			width: 600px;
			height: 450px;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 1;
		}
		ol{
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 2;
		}
		ol>li{
			float: left;
			color: white;
			width: 20px;
			height: 20px;
			border: 1px solid #fff;
			margin-right: 10px;
		}
		ol .olShow{
			color: #fff;
			background-color: #f60;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="pic/11.jpg" /></li>
			<li><img src="pic/22.jpg" /></li>
			<li><img src="pic/33.jpg" /></li>
			<li><img src="pic/44.jpg" /></li>
			<li><img src="pic/55.jpg" /></li>
			<li><img src="pic/66.jpg" /></li>
		</ul>
		
		<ol>
			<li class='olShow'>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ol>
	</div>



	
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var oUL=document.getElementsByTagName('ul')[0];
			var ulLi=oUL.getElementsByTagName('li');					//ul中的li 的集合
			
			var oOL=document.getElementsByTagName('ol')[0];
			var olLi=oOL.getElementsByTagName('li');					//ol中的li 的集合
			
			var oneHeight=ulLi[0].offsetHeight;								//一个图片的高度，等会儿用于top的位移
			
			for(var i=0;i<olLi.length;i++){
				olLi[i].index=i;
				olLi[i].onmouseover=function(){
					for(var i=0;i<olLi.length;i++){
						olLi[i].className=' ';
						
					}
					this.className='olShow';
					$(oUL).animate({
						top:(-oneHeight*this.index)+'px'					//一个图片的高度乘上数字，看位移为多少
					},200)
				}
			}
			
			
			
			
		}
		
	</script>

</body>
</html>